<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="普通订单" name="first">
      <div class="orderListRuleForm">
        <panle title='退款订单列表' content="退款订单列表"></panle>

        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">

          <el-form-item label="创建时间" prop="create_time">
            <el-date-picker
                v-model="form.create_time"
                type="daterange"
                align="right"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="订单号" prop="order_no">
            <el-input size="mini" placeholder="请输入订单号" v-model="form.order_no"></el-input>
          </el-form-item>
          <el-form-item label="退款状态" prop="state">
            <el-select v-model="form.state" placeholder="请选择" size="mini">
              <el-option label="申请退款" value="0"></el-option>
              <el-option label="同意退款" value="1"></el-option>
              <el-option label="拒绝退款" value="2"></el-option>
              <el-option label="成功退款" value="3"></el-option>
              <el-option label="退款关闭" value="4"></el-option>
              <el-option label="退款失败" value="7"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search" size="mini">搜索</el-button>
            <el-button @click="resetForm('form')" size="mini">重置</el-button>
            <el-button size="mini" @click="init()">刷新</el-button>
            <vue-json-excel
                style="display: inline;margin-left: 10px;"
                :data="tableData"
                :fields="excelFields"
                name="导出退款订单.xlsx"
                type="xlsx">
              <el-button size="mini">导出</el-button>
            </vue-json-excel>

          </el-form-item>
        </el-form>

        <div class="table-wrap">
          <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                    stripe default-expand-all>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="order_no" label="订单号"></el-table-column>
            <el-table-column prop="nickname" label="客户昵称"></el-table-column>
            <el-table-column prop="title" label="商品名称"></el-table-column>
            <el-table-column prop="image" label="商品主图">
              <template slot-scope="scope">
                <el-image :src="scope.row.image" fit="fill" style="width: 60px;height: 60px;"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="售出数量"></el-table-column>
            <el-table-column prop="price" label="退款金额">
                <template slot-scope="scope">
                    {{scope.row.price/100}}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="退款状态"></el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="agreetime" label="退款时间"></el-table-column>
            <el-table-column prop="reason" label="退款理由"></el-table-column>
            <el-table-column prop="argument" label="拒绝原因"></el-table-column>
            <el-table-column prop="nick_name" label="操作人"></el-table-column>

            <el-table-column prop="id" label="操作" width="210px">
              <template slot-scope="scope">
                <PersButton v-if=[0].includes(scope.row.state) type="primary" round label="同意" perms="sys:refund:edit" @click="agreeRefund(scope.row)"></PersButton>
                <PersButton v-if="scope.row.state === 0" type="danger" round perms="sys:refund:del" label="拒绝" @click="downRefund(scope.row)"></PersButton>
                <!--                  <PersButton type="info" round  label="详情"  perms="sys:refund:info" @click="infoRefund(scope.row)"></PersButton>-->

              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                           :page-size="form.pageSize"
                           background layout="total, sizes, prev, pager, next, jumper"
                           :total="form.total"></el-pagination>
          </div>
        </div>
      </div>

    </el-tab-pane>
    <!-- -------------------拼团订单---------------------------------------------------------------------------->
    <el-tab-pane label="拼团订单" name="second">
      <div class="orderListRuleForm">
        <panle title='退款订单列表' content="退款订单列表"></panle>

        <el-form :inline="true" ref="grform" :model="grform" label-width="80px" class="demo-form-inline">

          <el-form-item label="创建时间" prop="create_time">
            <el-date-picker
                v-model="grform.create_time"
                type="daterange"
                align="right"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="订单号" prop="order_no">
            <el-input size="mini" placeholder="请输入订单号" v-model="grform.order_no"></el-input>
          </el-form-item>
          <el-form-item label="退款状态" prop="state">
            <el-select v-model="grform.state" placeholder="请选择" size="mini">
              <el-option label="申请退款" value="0"></el-option>
              <el-option label="同意退款" value="1"></el-option>
              <el-option label="拒绝退款" value="2"></el-option>
              <el-option label="成功退款" value="3"></el-option>
              <el-option label="退款关闭" value="4"></el-option>
              <el-option label="退款失败" value="7"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchGroups" size="mini">搜索</el-button>
            <el-button @click="resetFormGroups('grform')" size="mini">重置</el-button>
            <el-button size="mini" @click="init()">刷新</el-button>
            <vue-json-excel
                style="display: inline;margin-left: 10px;"
                :data="tableDataGroups"
                :fields="excelFields"
                name="导出退款订单.xlsx"
                type="xlsx">
              <el-button size="mini">导出</el-button>
            </vue-json-excel>

          </el-form-item>
        </el-form>

        <div class="table-wrap1">
          <el-table :data="tableDataGroups" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                    stripe default-expand-all>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="order_no" label="订单号"></el-table-column>
            <el-table-column prop="nickname" label="客户昵称"></el-table-column>
            <el-table-column prop="title" label="商品名称"></el-table-column>
            <el-table-column prop="image" label="商品主图">
              <template slot-scope="scope">
                <el-image :src="scope.row.image" fit="fill" style="width: 60px;height: 60px;"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="售出数量"></el-table-column>
            <el-table-column prop="price" label="退款金额">
                <template slot-scope="scope">
                    {{scope.row.price/100}}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="退款状态"></el-table-column>
            <el-table-column prop="create_time" label="创建时间"></el-table-column>
            <el-table-column prop="agreetime" label="退款时间"></el-table-column>
            <el-table-column prop="reason" label="退款理由"></el-table-column>
            <el-table-column prop="argument" label="拒绝原因"></el-table-column>
            <el-table-column prop="nick_name" label="操作人"></el-table-column>
            <el-table-column prop="id" label="操作" >
              <template slot-scope="scope">
                <PersButton v-if=[0].includes(scope.row.state) type="primary" round label="同意" perms="sys:refund:edit" @click="agreeRefundGroups(scope.row)"></PersButton>
                <PersButton v-if="scope.row.state === 0" type="danger" round perms="sys:refund:del" label="拒绝" @click="downRefundGroups(scope.row)"></PersButton>
                <!--                  <PersButton type="info" round  label="详情"  perms="sys:refund:info" @click="infoRefund(scope.row)"></PersButton>-->

              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @size-change="handleSizeChangeGrouops" @current-change="handleCurrentChangeGroups"
                           :current-page="grform.groupsPageNumber" :page-sizes="[10, 50, 100, 200]"
                           :page-size="grform.groupsPageSize"
                           background layout="total, sizes, prev, pager, next, jumper"
                           :total="grform.groupsTotal"></el-pagination>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>

    
</template>

<script>
import {

    sendStaff
} from "@/api/scrm/lapsed/lapsed";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {getOrderList} from "@/api/sell/order/order";
import {
  agreeVerify,
  agreeVerifyGroups,
  getRefundGroupsList,
  getRefundList,
  refuseVerify, refuseVerifyGroups
} from "@/api/sell/refund/refund";


export default {
    name:'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            options: [],
            value: '',
            open: false,
            loading: false,
            tableData: [],
           tableDataGroups:[],
           activeName: 'first',
           number:0,
            status: 0,
            form: {
              create_time: '',
              state: '',
              order_no: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
             
            },
          grform: {
            create_time: '',
            state: '',
            order_no: '',
            groupsPageSize: 10,
            groupsPageNumber: 1,
            groupsTotal: 0,

          },
            optionsVa: [],
            value1: [],
           
            resForm: {
                "status":0,
                "value1":[]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            excelFields: {
              "订单号 ": "order_no",
              "客户昵称" : "nick_name",
              "商品名称": "title",
              "商品主图": "image",
              "售出数量": "number",
              "退款金额": "price",
              "退款状态": "status",
              "创建时间": "create_time",
              "退款时间": "agreetime",
              "退款理由": "reason",
              "拒绝原因": "argument",
              "操作人": "nick_name",
              
            }
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')

        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
       handleClick(tab, event)
       {
        this.activeName = tab.name;
        console.log(tab, event);
        this.init()
      },
        init() {
            this.loading = true;
            if (this.activeName == 'first' ){
              getRefundList(this.form).then((res) => {
                this.tableData = res.data.list;
                this.form.total = res.data.total;
                this.loading = false;
              })

            }else {
              getRefundGroupsList(this.grform).then((res) => {
                this.tableDataGroups = res.data.list;
                this.grform.groupsTotal = res.data.total;
                this.loading = false;
              })
            }

        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
      searchGroups: function () {
        this.loading = true;
        this.grform.groupsPageSize = 10;
        this.grform.groupsPageNumber = 1;
        this.init();
      },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
      handleSizeChangeGrouops: function (e) {
        this.grform.groupsPageSize = e;
        this.init();
      },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
      handleCurrentChangeGroups: function (e) {
        this.grform.groupsPageNumber = e;
        this.init();
      },
        resetForm(formName) {
            this.form.create_time = ''
            this.form.state = ''
            this.form.order_no = ''
            this.init();
        },
      resetFormGroups(formName) {
        this.grform.create_time = ''
        this.grform.state = ''
        this.grform.order_no = ''
        this.init();
      },
      agreeRefund:function(data) {
        this.$confirm('确定同意吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          agreeVerify(data).then((res)=>{
            if(res.code==200){
              this.msgSuccess(res.msg);
              this.init();
            }else{
              this.msgError(res.msg);
            }
          })
        }).catch(() =>{
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      agreeRefundGroups:function(data) {
        this.$confirm('确定同意吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          agreeVerifyGroups(data).then((res)=>{
            if(res.code==200){
              this.msgSuccess(res.msg);
              this.init();
            }else{
              this.msgError(res.msg);
            }
          })
        }).catch(() =>{
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      downRefund:function(data) {
        this.$prompt('请输入拒绝原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\u4e00-\u9fff]/,
          inputErrorMessage: '请输入中文'
        }).then(({ value }) => {

          refuseVerify({id:data.id,val:value}).then((res)=>{
            if(res.code==200){
              this.msgSuccess(res.msg);
              this.init();
            }else{
              this.msgError(res.msg);
            }
          })
        }).catch(() =>{
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      downRefundGroups:function(data) {
        this.$prompt('请输入拒绝原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\u4e00-\u9fff]/,
          inputErrorMessage: '请输入中文'
        }).then(({ value }) => {

          refuseVerifyGroups({id:data.id,val:value}).then((res)=>{
            if(res.code==200){
              this.msgSuccess(res.msg);
              this.init();
            }else{
              this.msgError(res.msg);
            }
          })
        }).catch(() =>{
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
        submitForm:function(data){
            
            this.$refs[data].validate((valid) => {
                if (valid) {
                    sendStaff(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.open=false;
                            this.init();

                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
      
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}
.table-wrap1{
  //我想修改 下面的表格的宽度 为100%
  &::v-deep .el-table__header-wrapper .el-table__header{
    width: 100% !important;
  }
  //&::v-deep .el-table__header-wrapper.el-table__header{
  //  width: 100%;
  //}
}


</style>